<template>
	<view class="">
		<view class="no_login_box" v-if="!token">
			<view class="iconfont icon-yonghutouxiang"></view>
			<button class="login_btn" type="warn" open-type="getUserInfo" @getuserinfo="getuserinfo_fun">一键登录</button>
			<view class="tip">登录后尽享更多权益</view>
		</view>
		<view class="login_box" v-else>
			<view class="top_bg_box">
				<image src="https://img2.baidu.com/it/u=712694738,3554631191&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=353" mode=""></image>
				<text>userNAME</text>
			</view>
			<view class="main_cards_box">
				<view class="card_item num_box">
					<view class="item">
						<text>8</text>
						<text>收藏的店铺</text>
					</view>
					<view class="item">
						<text>14</text>
						<text>收藏的商品</text>
					</view>
					<view class="item">
						<text>18</text>
						<text>关注的商品</text>
					</view>
					<view class="item min">
						<text>84</text>
						<text>足迹</text>
					</view>
				</view>
				<view class="order_Box">
					<view class="title">我的订单</view>
					<view class="o_items">
						<view class="item">
							<view class="iconfont icon-daifukuan"></view>
							<text>待付款</text>
						</view>
						<view class="item">
							<view class="iconfont icon-daishouhuo"></view>
							<text>待收货</text>
						</view>
						<view class="item">
							<view class="iconfont icon-tuihuotuikuan"></view>
							<text>退款/退货</text>
						</view>
						<view class="item">
							<view class="iconfont icon-quanbudingdan"></view>
							<text>全部订单</text>
						</view>
					</view>
				</view>
				<view class="listBox">
					<view class="item_li">
						收货地址
					</view>
					<view class="item_li">
						联系客服
					</view>
					<view class="item_li" @click="unLogin">
						退出登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabbar_tip_number from '../../mixins/tabbar_tip_number.js'
	import {mapState, mapMutations} from 'vuex'
	export default {
		mixins: [tabbar_tip_number],
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('m_user', ['token', 'un_login_go_login_history']),
		},
		methods: {
			...mapMutations('m_user', ["set_userinfo", "set_token", "set_adress", "set_un_login_go_login_history"]),
			getuserinfo_fun(e) {
				if(e.detail.errMsg != 'getUserInfo:ok') return uni.$showMsg('获取用户信息失败!')
				this.set_userinfo(e.detail.userInfo);
				
				// 调用函数 登录获取token
				this.tologin_getToken(e.detail)
			},
			async tologin_getToken(info) {
			 	const [err, res] = await uni.login().catch(err => err);
				if(err || res.errMsg != 'login:ok') return uni.$showMsg('登录失败!')
				// 准备登录请求参数
				const req_obj = {
					encryptedData: info.encryptedData,
					rawData: info.rawData,
					iv: info.iv,
					signature: info.signature,
					code: res.code
				}
				// 请求登录接口
				// console.log(req_obj)
				// const {data: res_data} = await uni.$http.post('/api/public/v1/users/wxlogin', req_obj);
				// if(res_data.data.meta.status >= 200 && res_data.data.meta.status < 300) return ;
				// console.log(res_data)
				const mock_token = `Bearer
				eyJhbGciOiJIUzl1NilsInR5cCl6lkpXVCJ9.eyJ1aWQiOjM1LCJpYXQiOjE1OTg4NjYONTIsImV4cCI6MTAwMTU5ODg2NjQ1MX0.8hg6C7spbNrs87YECTLzPgGJZ1Ho39Su8r6D3KOTzUE`;
				this.set_token(mock_token);
				uni.$showMsg('登陆成功')
				// 登陆成功 跳回去付钱
				if(this.un_login_go_login_history.type === 'switchTab') {
					uni.switchTab({
						url: this.un_login_go_login_history.url
					})
					// 删除跳转历史
					this.set_un_login_go_login_history({});
				}
			},
			unLogin() {
				this.set_token('');
				this.set_userinfo({});
				this.set_adress({});
			}
		}
	}
</script>

<style lang="scss">
	.no_login_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 200rpx 40rpx 150rpx 40rpx;
		background-color: #f6f9f6;
		position: relative;
		overflow: hidden;
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			position: absolute;
			bottom: 0px;
			left: 0px;
			border-radius: 100%;
			transform: translateY(50%);
		}
		.icon-yonghutouxiang {
			font-size: 200rpx;
			color: #adafad;
		}
		.login_btn {
			height: 100rpx;
			border-radius: 50rpx;
			width: 100%;
			margin-top: 95rpx;
			margin-bottom: 30rpx;
		}
		.tip {
			color: #999999;
		}
	}
	.top_bg_box {
		background-color: #c00000;
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image {
			width: 220rpx;
			height: 220rpx;
			border-radius: 110rpx;
			overflow: hidden;
		}
		text {
			margin-top: 15rpx;
			color: #fff;
		}
	}
	.main_cards_box {
		// overflow: hidden;
		border-top: 1px solid transparent ;
		padding: 0px 14rpx;
		background-color: #f6f4f4;
		position: relative;
		// height: 1000rpx;
		&>view {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
		}
		.num_box {
			// z-index: 999;
			width: 96%;
			height: 120rpx;
			position: absolute;
			top: -28rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.min {
				flex: 0;
				max-width: 101rpx;
				min-width: 100rpx;
			}
		}
		.order_Box {
			margin-top: 100rpx;
			width: 100%;
			.title {
				height: 50rpx;
				padding-left: 25rpx;
				line-height: 50rpx;
			}
			.o_items {
				height: 120rpx;
				display: flex;
				margin-top: 20rpx;
				.item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.iconfont {
						font-size: 50rpx;
					}
				}
			}
		}
		.listBox {
			width: 100%;
			margin-top: 20rpx;
			.item_li {
				height: 100rpx;
				padding-left: 12rpx;
				box-sizing: border-box;
				position: relative;
				line-height: 100rpx;
				&::after {
					content: '';
					display: block;
					width: 20rpx;
					height: 20rpx;
					border-top: 2px solid black;
					border-right: 2px solid black;
					transform: rotate(45deg);
					position: absolute;
					top: 40rpx;
					right: 20rpx;
				}
				&::hover {
					background-color: #999999;
				}
			}
		}
	}
</style>
